<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card>
            <div class="menbermsg">
                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']" class="leftimg"></el-image>
                <div class="rightbox">
                    <div class="cont">
                        <div class="title">个人基本信息</div>
                        <div class="contItem">
                            <div class="leftname">账户信息:</div>
                            <div class="righttext">{{ pageData.userName }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">手机号:</div>
                            <div class="righttext">{{ pageData.phoneNum ? cutOutPhone(pageData.phoneNum) : "" }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">注册时间:</div>
                            <div class="righttext">{{ pageData.createTime }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">实名认证:</div>
                            <div class="righttext">
                                <span class="noaudi" v-if="pageData.certified == '0'"> 未认证</span>
                                <span v-if="pageData.certified == '1'">认证中</span>
                                <span v-if="pageData.certified == '2'" style="color: #23b14d">已认证</span>
                            </div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">联系地址:</div>
                            <div class="righttext">
                                <div class="righttext" v-if="cutAddress()">{{ cutAddress() }}</div>
                                <span class="noaddr" v-else>尚未设置联系地址</span>
                            </div>
                        </div>
                    </div>
                    <div class="cont" v-if="route.query.teamId">
                        <div class="title">团队信息</div>
                        <div class="contItem">
                            <div class="leftname">团队名称:</div>
                            <div class="righttext">{{ pageData.teamName }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">加入时间:</div>
                            <div class="righttext">{{ pageData.updateTime }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">所属部门:</div>
                            <div class="righttext">{{ pageData.departmentName ? pageData.departmentName : "未加入部门" }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">所属岗位:</div>
                            <div class="righttext">{{ pageData.positionName ? pageData.positionName : "未分配岗位" }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">团队认证:</div>
                            <div class="righttext">
                                <span :class="pageData.certified != '2' ? 'noaudi' : 'audi'">{{ pageData.certified == "-1" ? "认证失败" : pageData.certified == "0" ? "未认证" : pageData.certified == "1" ? "认证中" : "已认证" }}</span>
                            </div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">组织机构类型:</div>
                            <div class="righttext">{{ pageData.type }}</div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">团队行业:</div>
                            <div style="width: 370px">
                                <div class="righttext" v-for="(item, index) in pageData.industrialClassificationList" :key="index">
                                    {{ item.industrialName }}
                                </div>
                            </div>
                        </div>
                        <div class="contItem">
                            <div class="leftname">加入方式:</div>
                            <div class="righttext">{{ pageData.invitationWay == "0" ? "被动加入" : "主动加入" }}</div>
                        </div>
                    </div>
                    <div class="cont">
                        <div class="title">资质信息</div>
                        <div class="certification">开发中</div>
                    </div>
                    <sxnfbtn @click="router.back()">返回</sxnfbtn>
                    <sxnfbtn @click="opensubmitsuccessfully" v-if="route.query.type">移除</sxnfbtn>
                </div>
            </div>
        </el-card>

        <div class="submitsuccessfully" v-if="submitsuccessfully">
            <div class="contMsg">
                <div class="title">移除成员</div>
                <img src="../../../assets/images/remove.png" alt="" srcset="" />
                <div class="success">
                    {{ userInfo.nickName }} 管理员确定要移除成员 <span>{{ pageData.userName }}</span>
                </div>
                <div class="tipcg">请确定信息后再进行下一步操作，避免误删。</div>
                <div class="brnbox">
                    <sxnfbtn class="btnzdl" @click="submitsuccessfully = false">取消</sxnfbtn>
                    <sxnfbtn class="btnzdl" @click="removeMenber">确定</sxnfbtn>
                    <!-- <div class="btnzdl" @click="submitsuccessfully = false">取消</div> -->
                    <!-- <div class="btnzdl" @click="removeMenber">确定</div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { teamMenuberMsg, setDepartmentRemove, removeTeamMenber } from "@/api/team";
const route: any = useRoute();
const router: any = useRouter();
const store = useStore();
// console.log(route.params.id, 11);
const pageData: any = ref({});
const getPageData = () => {
    teamMenuberMsg({
        userId: route.params.id,
        teamId: route.query.teamId ? route.query.teamId : "",
    }).then((res: any) => {
        console.log(res, "321s");
        pageData.value = res.data;
    });
};
if (route.params.id) {
    getPageData();
}

/**
 * 手机号码截取
 * @param phone 手机号码
 */
const cutOutPhone = (phone: string) => {
    if (!phone) {
        return;
    }
    const pn = phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    return pn;
};
/**
 * 地址
 */
const cutAddress = () => {
    let o = "";
    if (pageData.value.userAddressArea) {
        o = JSON.parse(pageData.value.userAddressArea).valueText;
    }
    if (pageData.value.userAddress) {
        o = `${o}/${pageData.value.userAddress}`;
    }
    return o;
};
// 移出成员弹窗
const submitsuccessfully = ref(false);
const opensubmitsuccessfully = () => {
    submitsuccessfully.value = true;
};
const userInfo: any = computed((e: any) => {
    return store.getters.userInfo;
});
const removeMenber = () => {
    const type = route.query.type;
    const data = pageData.value;
    console.log(data);
    // return;
    if (type == 1) {
        // 移出团队
        if (data.userIdTeam != data.userId) {
            removeTeamMenber({
                userId: data.userId,
                teamId: data.teamId,
                text1: 2,
                id: data.id,
            }).then((res) => {
                ElMessage.success("操作成功");
                router.back();
            });
        } else {
            ElMessageBox.alert("你是团队创建者，不能把自己移出团队！");
            submitsuccessfully.value = false;
        }
    } else {
        // 移出部门
        setDepartmentRemove({
            userId: data.userId,
            teamId: data.teamId,
            positionId: data.positionId,
        }).then((res) => {
            ElMessage.success("操作成功");
            router.back();
        });
    }
};
</script>
<style scoped lang="scss">
.menbermsg {
    padding: 10px 30px 30px 60px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .leftimg {
        width: 80px;
        height: 80px;
        margin-right: 80px;
        border-radius: 100%;
    }
    .rightbox {
        width: 90%;
        .cont {
            padding-bottom: 30px;
            border-bottom: 1px dotted #cccccc;
            margin-bottom: 30px;
            .title {
                color: #333333;
                font-size: 14px;
                width: 85px;
                text-align: right;
            }
            .contItem {
                margin-top: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .leftname {
                    color: #666666;
                    font-size: 12px;
                    width: 85px;
                    text-align: right;
                    margin-right: 200px;
                }
                .righttext {
                    color: #333333;
                    font-size: 12px;
                    .noaudi {
                        color: #f80000;
                    }
                    .audi {
                        color: #23b14d;
                    }
                    .noaddr {
                        color: #999999;
                    }
                }
            }
            .certification {
                width: 298px;
                height: 174px;
                background: #eeeeee;
                border-radius: 5px;
                text-align: center;
                line-height: 174px;
                font-size: 14px;
                color: #000000;
                margin-top: 30px;
                margin-left: 285px;
            }
        }
    }
}
.submitsuccessfully {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.1);
    z-index: 999;
    .contMsg {
        width: 435px;
        height: 327px;
        background: #ffffff;
        border-radius: 5px 5px 5px 5px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .title {
            text-align: center;
            margin-top: 33px;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
        }
        img {
            width: 50px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 38px;
            margin-left: 5px;
        }
        .success {
            font-weight: normal;
            font-size: 16px;
            color: #333333;
            margin-top: 38px;
            text-align: center;
            span {
                color: #ff0000;
            }
        }
        .tipcg {
            font-size: 14px;
            color: #999999;
            text-align: center;
            margin-top: 16px;
            padding: 0;
        }
        .brnbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btnzdl {
            width: 100px;
            text-align: center;
            cursor: pointer;
            margin-top: 30px;
            color: #ffffff;
        }
    }
}
</style>
